<template>
  <div>
    <h1>Switch 开关</h1>
    <p>在两种状态间切换时用到的开关选择器。</p>
    <h2>基本用法</h2>
    <div class="testSwitch">
      <sh-switch v-model="value" @input="switchInput" @change="switchChange"></sh-switch> <span>{{this.value}}</span>
    </div>
    <p>绑定 <code>v-model</code> 到一个 <code>Boolean</code> 类型的变量。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;sh-switch v-model=&quot;value&quot;&gt;&lt;/sh-switch&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            value:true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>禁用状态</h2>
    <div class="testSwitch">
      <sh-switch v-model="value" disabled></sh-switch>
      <sh-switch v-model="value1" disabled style="margin-left:10px;"></sh-switch>
    </div>
    <p>设置 <code>disabled</code> 属性，接受一个 <code>Boolean</code> ，设置 <code>true</code> 即可禁用。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;sh-switch v-model=&quot;value&quot; disabled&gt;&lt;/sh-switch&gt;
        &lt;sh-switch v-model=&quot;value1&quot; disabled&gt;&lt;/sh-switch&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            value:true,
            value1: false
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h1>API</h1>
    <h2>Switch props</h2>
    <Table :columns="tableColumn" :data="tableData"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-switch',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: '是否打开',
          type: 'Boolean',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用',
          type: 'Boolean',
          default: 'false'
        }
      ],
      value: true,
      value1: false
    }
  },
  methods: {
    switchChange () {
      console.log('switch的change事件：' + this.value)
    },
    switchInput () {
      console.log('switch的input事件：' + this.value)
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
.testSwitch {
  width: 500px;
  height: 60px;
  display:flex;
  align-items: center;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
</style>
